<%--
  Created by IntelliJ IDEA.
  User: cos
  Date: 2021/12/24
  Time: 14:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <%--<form action="">--%>
            用户名: <input type="text" id="ename">
            工资: <input type="number" id="startSalary"> - <input type="number" id="endSalary">
            <button id="btn1" onclick="getPage(1)">搜索</button>
            <%--</form>--%>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table class="table table-hover table-bordered">
                <thead>
                <tr>
                    <th>员工名</th>
                    <th>员工性别</th>
                    <th>员工工资</th>
                    <th>员工部门编号</th>
                    <th>员工出生日期</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                </tbody>
                <tfoot>
                <tr class="text-center">
                    <td colspan="6" >
                        <a href="javascript:getPage(1)">首页</a>
                        <a href="javascript:prePage()">上一页</a>
                        <a href="javascript:nextPage()">下一页</a>
                        <a href="javascript:finalPage()">尾页</a>
                        <span id="pageNum"></span>
                        /
                        <span id="pages"></span>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<script>
    $(function () {
        //进入就默认访问第一页
        getPage(1);
    })

    function finalPage() {
        var num = parseInt($("#pages").text());
        getPage(num);
    }

    function prePage() {
        //$("#pageNum").text() 获取当前页码值  parseInt 转为int 防止变成字符串的处理
        var num = parseInt($("#pageNum").text()) - 1;
        getPage(num);
    }

    function nextPage() {
        //$("#pageNum").text() 获取当前页码值  parseInt 转为int 防止变成字符串的处理
        var num = parseInt($("#pageNum").text()) + 1;
        getPage(num);
    }


    function getPage(num) {
        var ename = $("#ename").val();
        var startSalary = $("#startSalary").val();
        var endSalary = $("#endSalary").val();
        $.get("/emp/getEmpByPage",
            "num=" + num + "&ename=" + ename + "&startSalary=" + startSalary + "&endSalary=" + endSalary,
            function (result) {
                //杀儿子
                $("#tb").empty();
                var emplist = result.list;
                for (var i = 0; i < emplist.length; i++) {
                    //数据
                    $("#tb").append("<tr>" +
                        "    <td>" + emplist[i].ename + "</td>" +
                        "    <td>" + emplist[i].esex + "</td>" +
                        "    <td>" + emplist[i].salary + "</td>" +
                        "    <td>" + emplist[i].dname + "</td>" +
                        "    <td>" + emplist[i].bornDate + "</td>" +
                        "    <td>操作</td>" +
                        "</tr>");
                }
                //把当前页码和总页数放入标签显示用户
                $("#pageNum").text(result.pageNum);
                $("#pages").text(result.pages);
            })
    }
</script>
</body>
</html>
